import React, { memo, useState, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { SongListWrap } from "./style";
import { getPlaylistComment } from "../../discover/d-pages/playlistPage/playlist-page/store/actionTypes";

import Comment from "@/components/aboutComment/comment";
import Pagination from "@/components/pagination";
import Loading from "@/components/loading";
import CreateSong from "../collageSongList";

export default memo(function CreateSongList(props) {
  const [pageNum, setPageNum] = useState(1);
  const dispatch = useDispatch();
  const [addNum, setAddNum] = useState(0);
  const headImg = JSON.parse(window.localStorage.getItem("userInfo")).data
    .profile.avatarUrl;

  let state = "";
  useEffect(() => {
    if (props.location.search.split("=")[1] == undefined) {
      if (state.userPlayLists.length !== 0) {
        dispatch(
          getPlaylistComment(
            state.userPlayLists.playlist[1].id,
            20,
            (pageNum - 1) * 20
          )
        );
      }
    } else {
      dispatch(
        getPlaylistComment(
          props.location.search.split("=")[1],
          20,
          (pageNum - 1) * 20
        )
      );
    }
  }, [dispatch, props.location.search.split("=")[1], pageNum]); // eslint-disable-line react-hooks/exhaustive-deps

  state = useSelector(
    (state) => ({
      playlistRecomments: state.getIn(["playlist", "playlistComments"]),
      userPlayLists: state.getIn(["userInfo", "userPlaylistInfo"]),
    }),
    shallowEqual
  );

  const getPage = (page) => {
    setPageNum(page);
  };

  const addNumQ = () => {
    setAddNum(addNum + 1);
  };

  console.log(state.userPlayLists);

  const userId =
    props.location.search.split("=") == ""
      ? state.userPlayLists.playlist
        ? state.userPlayLists.playlist[1].id
        : ""
      : props.location.search.split("=")[1];

  return (
    <SongListWrap>
      {userId !== undefined ? (
        <>
          <CreateSong id={userId} />
          <div style={{ padding: "0 30px" }}>
            <Comment
              addNumQ={addNumQ}
              t={1}
              type={2}
              id={userId}
              headImg={headImg}
              pageNum={pageNum}
              comments={state.playlistRecomments}
            />
          </div>
          <div id="tcr">
            <Pagination
              page={pageNum}
              size={20}
              getPage={getPage}
              total={
                state.playlistRecomments.length !== 0
                  ? state.playlistRecomments.total
                  : ""
              }
            />
          </div>
          <div style={{ height: "100px", marginBottom: "50px" }}></div>
        </>
      ) : (
        <div className="loading">
          <Loading />
        </div>
      )}
    </SongListWrap>
  );
});
